<template>
    <div class="box">
        <div class="images">
            <img src="../assets/images/21185858-42db-4b7b-b6f4-24f5be717f42.jpeg" alt="" />
            <img src="../assets/images/20230613194600.jpg" alt="" />
            <img src="../assets/images/c7686b393255089123ff0d8d0072b95b.jpg" alt="" />
            <img src="../assets/images/profile.473f5971.jpg" alt="" />
        </div>
    </div>
</template>

<style scoped>
/*
    animation动画属性
    name    调用动画的名称，和@keyframes的名字保持一致
    duration    动画完成一个周期所需用的时间
    timing-function    动画的速度变化类型
    delay    播放之前的延时时间
    iteration-count    动画播放的次数 infinte表示无限次播放
    direction    动画播放的方向，normal为默认值，表示正常播放，alternate表示轮流播放，即在基数词正常播放，偶数次向后播放
    fill-mode：forwards； 动画停在最后一帧，默认值为none
    paly-state: paused|running; 规定动画正在运行还是暂停，默认值为running
    animation: name duration timing-function delay iteration-count direction fill-mode;
*/
@keyframes myname {
    35% {
        margin-left: -400px;
    }
    70% {
        margin-left: -800px;
    }
    100% {
        margin-left: -1200px;
    }
}
.box {
    background: wheat;
    width: 400px;
    height: 400px;
    margin: 100px auto;
    overflow: hidden;
}

.images {
    width: 1600px;
    height: 400px;
    box-sizing: border-box;
    overflow: hidden;
    animation: myname 10s 0s infinite alternate forwards;
}

img {
    width: 400px;
    object-fit: cover;
    float: left;
}
</style>
